<template >
    <div>
       <myswiper :key="looplist.length" ref="myswiper">
        <div class="swiper-slide" v-for="data in looplist" :key="data.filmId">
          <img :src="data.poster"/>
        </div>
      </myswiper>
      <filmHeader :class="isFixed?'fixed':''"></filmHeader>
      <router-view></router-view>
    </div>
</template>
<script>
import myswiper from '@/views/Film/Swiper'
import filmHeader from '../views/Film/FilmHeader'
import axios from 'axios'
import { Indicator } from 'mint-ui'
export default {
  data () {
    return {
      looplist: [],
      isFixed: false
    }
  },
  mounted () {
    Indicator.open('加载中...')
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=4271989',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log('轮播数据', res.data.data.films.length)
      this.looplist = res.data.data.films
      Indicator.close()
    })
    window.onscroll = this.handleScroll
  },
  components: {
    myswiper,
    filmHeader
  },
  methods: {
    handleScroll () {
      // console.log(document.documentElement.scrollTop,this.$refs.myswiper.$el.offsetHeight)
      if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
        // console.log("fixed")
        this.isFixed = true
      } else {
        // console.log("unfixed")
        this.isFixed = false
      }
    }
  },
  beforeDestroy () {
    // console.log("beforeDestroy")
    window.onscroll = null
  }
}
</script>
